<template>
    <div>
        <BaseInputText v-model="newTodoText" placeholder="New todo" v-on:keydown.enter="addTodo"/>
        <BaseSelect @getSelected="selected=$event" v-bind:select-data="levels"/>
        <ul v-if="true">
            <TodoListItem
                    v-for="todo in todos"
                    v-bind:key="todo.id"
                    v-bind:todo="todo"
                    v-on:remove="removeTodo"
            />
        </ul>
        <p v-else>
            Nothing left in the list. Add a new todo in the input above.
        </p>
        <p>{{ info }}</p>
    </div>
</template>

<script>
    import BaseInputText from './BaseInputText.vue'
    import TodoListItem from './TodoListItem.vue'
    import axios from 'axios'
    import BaseSelect from "@/components/BaseSelect";


    export default {
        components: {
            BaseSelect,
            BaseInputText, TodoListItem,
        },
        data() {
            return {
                newTodoText: '',
                info: null,
                todos: null,
                selected: 0,
                levels: [
                    {
                        CODE: 0,
                        VALUE: "普通"
                    },
                    {
                        CODE: 1,
                        VALUE: "一般"
                    },
                    {
                        CODE: 2,
                        VALUE: "中等"
                    },
                    {
                        CODE: 3,
                        VALUE: "紧急"
                    }
                    ]
            }
        },
        mounted() {
            axios
                .get('http://localhost:8080/index')
                .then(response => {
                    // eslint-disable-next-line no-console
                    console.log(response, "success");
                    this.todos = response.data
                })
                .catch(function (error) { // 请求失败处理
                    // eslint-disable-next-line no-console
                    console.log(error);
                    // eslint-disable-next-line no-console
                    console.log(this.info);
                });
        },
        methods: {
            addTodo() {
                let _this = this;
                const trimmedText = this.newTodoText.trim();
                const level = this.selected;
                if (trimmedText) {
                    axios.post('http://localhost:8080/add', {
                        title: trimmedText,
                        level: level,
                    })
                        .then(function (response) {
                            if (response.data) {
                                _this.info = response.data;
                                _this.todos.push({
                                    id: response.data.data.id,
                                    title: trimmedText,
                                });
                                _this.newTodoText = ''
                            }
                        })
                        .catch(function (error) {
                            // eslint-disable-next-line no-console
                            console.log(error);
                        });


                }
            },
            removeTodo(idToRemove) {
                let _this = this;
                axios.delete('http://localhost:8080/delete/' + idToRemove, {
                    id: idToRemove,
                })
                    .then(function (response) {
                        if (response.data.code === 200) {
                            alert(response.data.msg);
                            _this.todos = _this.todos.filter(todo => {
                                return todo.id !== idToRemove
                            })
                        } else {
                            alert(response.data.msg)
                        }
                    })
                    .catch(function (error) {
                        // eslint-disable-next-line no-console
                        console.log(error)
                    });

            }
        }
    }
</script>